<template>
    <view class="tag flex-row gap-[40rpx]">
        <view
            class="tag-item"
            :class="{
                active: modelValue === index + 1
            }"
            v-for="(item, index) in list"
            :key="index"
            @click="
                change({
                    ...item,
                    index: index + 1
                })
            "
        >
            {{ item.text }}
        </view>
        <!-- <view
      class="tag-item"
      :class="{
        active: page.params.bizTab === '2',
      }"
      @click="bizTabSwitch(2)"
    >
      新发</view
    > -->
    </view>
</template>

<script lang="ts" setup>
const props = defineProps(['list', 'modelValue'])
const emit = defineEmits(['update:modelValue', 'change'])

const change = (row) => {
    emit('update:modelValue', row.index)
    emit('change', row)
}
</script>

<style scoped lang="scss">
.tag {
    padding: 40rpx 0;

    .tag-item {
        background-color: #f7f7f8;
        padding: 10rpx 30rpx;
        color: #4c5879;
        font-size: 13px;
        border-radius: 999rpx;
    }

    .active {
        background-color: #376af7;
        color: #fff;
    }
}
</style>
